<template>
    <div>
        <div class="app-container">
            <top-step @getCurrentStateId="getCurrentStateId"  :id="id"></top-step>
        </div>
        <div class="app-container" style="margin-bottom: 70px">
            <el-tabs v-model="activeName">
                <el-tab-pane label="工单详情" name="first">
			<center-form :flowInfo="flowInfo"></center-form>
                </el-tab-pane>
                <el-tab-pane label="流程图" name="second">
                    <process
                            :id="flowInfo.workflow_id"
                            :current_state_id="current_state_id"
                            v-if="current_state_id && activeName == 'second'"
                    ></process>
                </el-tab-pane>
                <el-tab-pane label="流程动态" name="third">
                    <right-steps :id="id"></right-steps>
                </el-tab-pane>
            </el-tabs>
            <bottom-tools-bar
                    :workflow_id="flowInfo.workflow_id"
                    v-if="flowInfo.workflow_id"
                    :flowInfo="flowInfo"
            ></bottom-tools-bar>
        </div>
    </div>
</template>

<script>
    import workManagement from "@/api/workManagement/index";
    import process from "./process";
    import rightSteps from "./rightSteps";
    import topStep from "./topStep";
    import BottomToolsBar from "./bottomToolsBar";
    import eventBus from "@/utils/eventBus";
    import CenterForm from "./CenterForm";

    export default {
        components: {CenterForm, BottomToolsBar, process, rightSteps, topStep},
        data() {
            return {
                activeName: "first",
                reverse: true,
                ORecordList: [],
                flowStepList: [],
                current_state_id: "",
                fieldList: [],
                flowlogsList: [],
                form: {suggestion: ""},
                reloadFlag: true,
                flowInfo: {},
                id: this.$route.query.id * 1
            };
        },
        created() {
            this.getDetailInfo();
            this.refreshData();
        },
        methods: {
            toCloseWork() {
                workManagement
                    .toClose(this.id, {suggestion: this.form.suggestion})
                    .then(res => {
                        this.msgSuccess("处理成功！");
                        this.handleClose();
                    });
            },
            onSubmit() {
                //console.log("submit!");
            },
            handleClose() {
                this.$emit("update:visible", false);
            },

            getDetailInfo() {
                workManagement.getDetailInfo(this.id).then(res => {
                        this.fieldList = res.data.value.field_list;
                        this.flowInfo = res.data.value;
                });
            },
            getCurrentStateId(id) {
                this.current_state_id = id;
            },
            refreshData() {
                eventBus.$on("submitWork", () => {
                    this.getDetailInfo;
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .demo-ruleForm {
        width: 92% !important;
    }

</style>
